import react from 'react'
import './header-nav.scss'
import { NavLink } from 'react-router-dom'


export default class HeaderNav extends react.Component {
    constructor(props) {
        super(props)
        this.state = {
            headerlist: [],
            tabIndex: -1
        }
        this.fixedref = react.createRef()  // 创建ref对象
    }
    componentDidMount() {
        this.$axios.get('https://apipc-xiaotuxian-front.itheima.net/home/category/head').then(res => {
            if (res.data.msg == '操作成功') {
                this.setState({
                    headerlist: res.data.result  // 头部导航
                })
            }
        })
        window.addEventListener('scroll', this.scrollHandle)
    }
    // 页面滚动事件
    scrollHandle = (event) => {
        //滚动条高度
        let ctx = this;
        let clientHeight = document.documentElement.clientHeight; //可视区域高度
        let scrollTop = document.documentElement.scrollTop;  //滚动条滚动高度
        let scrollHeight = document.documentElement.scrollHeight; //滚动内容高度
    }
    // 鼠标滑过显示选项卡
    showGoodsNav(index) {
        this.state.tabIndex = index
        this.setState({
            tabIndex: this.state.tabIndex
        })
    }
    // 鼠标滑出关闭选项卡
    hideGoodsNav() {
        this.setState({
            tabIndex: -1
        })
    }
    render() {
        const { headerlist } = this.state
        return (
            <div id="header-nav">
                <div className="header">
                    <div className="container" >
                        <h1><a href="">小兔鲜</a></h1>
                        <ul>
                            {headerlist.length > 0 && (
                                <li>
                                    <NavLink to="/">首页</NavLink>
                                </li>
                            )}

                            {headerlist.map((item, index) => {
                                return (
                                    <li key={item.id} onMouseOver={this.showGoodsNav.bind(this, index)} onMouseOut={this.hideGoodsNav.bind(this)}>
                                        <NavLink to={`/category/${item.id}`}>{item.name}</NavLink>
                                        <div className={`headerNav ${this.state.tabIndex == index ? 'headerover' : ''}`}>
                                            <ul>
                                                {item.children.map((i, index) => {
                                                    return (
                                                        <li key={i.id}>
                                                            <NavLink to="">
                                                                <img src={i.picture} />
                                                                <p>{i.name}</p>
                                                            </NavLink>
                                                        </li>
                                                    )
                                                })}
                                            </ul>
                                        </div>
                                    </li>
                                )
                            })}

                        </ul>
                        <div className="secrch">
                            <input type="text" placeholder="搜一搜" />
                        </div>
                        <div className="cart">
                            <NavLink to="/cart">
                                <em></em>
                            </NavLink >
                            <div className="layer">
                                <div className="list">
                                    <div className="item">
                                        <a href="">
                                            <img src="" alt="" />
                                            <div className="center">
                                                <p className="name"></p>
                                                <p className="attr"></p>
                                            </div>
                                            <div className="right">
                                                <p className="price">￥</p>
                                                <p className="count">X</p>
                                            </div>
                                        </a>
                                        <div className="del">X</div>
                                    </div>
                                </div>
                                <div className="foot">
                                    <div className="left">
                                        <p>共<span></span>件商品</p>
                                        <p>￥</p>
                                    </div>
                                    <button>去购物车结算</button>
                                </div>
                            </div >
                        </div >
                    </div >
                </div >
                {/* <div className={`heaerfixed `} ref={this.fixedref}>
                    <div className="container">
                        <h1></h1>
                        <ul>
                            <li>
                                <NavLink>首页</NavLink>
                            </li>
                            {headerlist.map((item, index) => {
                                return (
                                    <li key={item.id} onMouseOver={this.showGoodsNav.bind(this, index)} onMouseOut={this.hideGoodsNav.bind(this)}>
                                        <NavLink to="">{item.name}</NavLink>
                                        <div className={`headerNav ${this.state.tabIndex == index ? 'headerover' : ''}`}>
                                            <ul>
                                                {item.children.map((i, index) => {
                                                    return (
                                                        <li key={i.id}>
                                                            <NavLink to="">
                                                                <img src={i.picture} />
                                                                <p>{i.name}</p>
                                                            </NavLink>
                                                        </li>
                                                    )
                                                })}
                                            </ul>
                                        </div>

                                    </li>
                                )
                            })}

                        </ul>
                    </div >
                </div > */}

            </div >
        )
    }
}